<template>
	<view>
		<view class="lll">

		</view>
		<checkbox-group @change="ckChange">
			<view class="shops" v-for="(item,index) in shoplist" :key="item.index">

				<view class="left">

					<label>
						<checkbox @click="cheackk(item.skuId)" :value="item.id" :checked="item.cheack" />
					</label>

					<image :src="item.cover_img" mode=""></image>
				</view>

				<view class="mid">
					<view style="font-size: 20rpx;">
						{{item.gname}}
					</view>
					<view style="font-size: 20rpx;
color: #8D8D8D;">
						编号:{{item.sku_code}}
					</view>
					<view style="font-size: 20rpx;
				color: #8D8D8D;">
						数量:{{item.count}}
					</view>
				</view>
				<view class="right">
					<view style="font-size: 30rpx;
				color: #8D8D8D;">
						价格: ¥{{item.price/100}}
						<view class="number-box">
							<view @click="numunder(item.id)" class="numbtn">-</view>

							<view class="number">
								{{item.count}}
							</view>
							<view @click="numon(item.id)" class="numbtn">+</view>
						</view>
					</view>

				</view>
			</view>
		</checkbox-group>
		<view class="floot">
			<view class="floot-l">
				<checkbox-group @change="selAll">
					<label @click="allcheack">
						<text>全选</text>
						<checkbox :checked="Ischeack" />
					</label>
				</checkbox-group>
			</view>
			<view class="floot-r">
				合计¥{{totalPrice}}
				<button class="btn" type="default" @click="paygo">结算</button>
			</view>
		</view>
	</view>
</template>

<script>
	import MineApi from '@/api/mine/index.js'
	export default {

		name: 'dada',
		data() {
			return {
				shoplist: [],
				Ischeack: false,
				userinfo: [],
				useinfo: [],
				checkbox: [],
                

			};
		},


		methods: {
			selAll() {

				this.shoplist.forEach((item) => {
					if (this.Ischeack == false) {
						item.cheack = true
					} else {
						item.cheack = false
					}
				})
			},
			numunder(id) {
				// this.shoplist.forEach(item => {
				// 	if (item.id == id) {
						
				// 		return
				// 	}
				// 	console.log(item)

				// })



			},

			numon() {
				this.num++
			},
			paygo() {
				var skuList = []
				for (var i = 0; i < this.checkbox.length; i++) {
					var TempId = this.checkbox[i]
					var sku = this.shoplist.find((ele) => ele.id == TempId)
					if (sku) {
						skuList.push(sku)
					}
				}
				var totalCount = 0;
				// 总价格
				var totalPrice = 0;
				skuList.forEach(item => {
					totalCount += item.count;
					totalPrice += item.price;
				});
				var shopObj = {
					freight: 0,
					count: totalCount,
					userId: this.useinfo.id,
					price: totalPrice, // 总价格
					orderDetailList: skuList
				}
				uni.setStorageSync('pay_shop', shopObj);
				uni.navigateTo({
					url: '/pages/mine/order/detail/index',
				})
			},
			bindChange(value) {
				console.log()
			},
			ckChange(e) {
				console.log('==>', e.detail)
				this.checkbox = e.detail.value;

			},
			cheackk(id) {

				this.shoplist.forEach(ele => {
					if (ele.skuId == id) {
						ele.cheack = !ele.cheack

					}
				})
				//刷新局部
				// this.$forceUpdate();
				//強制刷新頁面
				// uni.navigateBack()

				var choosechark = this.shoplist.some(ele =>
					(ele.cheack == false)
				)
				if (choosechark == false) {
					this.Ischeack = true
				} else {
					this.Ischeack = false
				}


			},
			allcheack() {
				this.Ischeack = !this.Ischeack

			},
			getuserinfo() {
				this.userinfo = uni.getStorageSync('storage_key').data;
				console.log(this.userinfo)
				this.getcartlist()
			},
			getcartlist() {
				MineApi.cartList({
					userId: this.userinfo.id
				}).then((res) => {

					res.data.data.forEach(item => item.cheack = false)
					this.shoplist = res.data.data
					console.log(this.shoplist, 'cart')




				})
			}
		},
		onLoad() {
			// this.list = uni.getStorageSync('leju-buycart');
			// console.log(this.list)
			// this.count = this.list.count
		},
		created() {
			this.getuserinfo()
			this.useinfo = uni.getStorageSync('storage_key').data;
		},
		computed: {
			totalPrice() {
				return this.shoplist.reduce((a, b) => {
					if (b.cheack) {
						return a + b.count * b.price / 100
					} else {
						return a
					}
				}, 0)
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #f1ece7;
	}

	.lll {
		width: 100%;
		height: 30rpx;
		background: #f1ece7;
	}

	.shops {
		border-radius: 24rpx;
		width: 672rpx;
		height: 208rpx;
		margin: 16rpx auto;
		background: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.left {
		width: 176rpx;
		height: 136rpx;

		display: flex;

		align-items: center;

		.ipt {
			margin-top: -10rpx;
		}

		image {
			width: 136rpx;
			height: 136rpx;
		}
	}

	.mid {
		width: 168rpx;
		height: 168rpx;

		view {
			margin-top: 10rpx;
		}
	}

	.right {
		width: 200rpx;
		height: 90%;

		.number-box {
			width: 150rpx;
			height: 60rpx;
			display: flex;
			justify-content: space-around;

			.numbtn {
				width: 40rpx;
				font-size: 60rpx;
				line-height: 30rpx;
				text-align: center;
				color: #fff;
				height: 40rpx;
				background: red;


			}
		}

		view {
			margin-top: 30rpx;
		}
	}

	.floot {
		height: 100rpx;
		width: 100%;
		position: fixed;
		background: #fff;
		bottom: 0;
		display: flex;
		justify-content: space-around;

		.floot-l {
			width: 150rpx;
			height: 100%;

			display: flex;
			align-items: center;
		}

		.floot-r {
			width: 400rpx;
			height: 100%;

			display: flex;
			justify-content: space-between;
			align-items: center;

			.btn {
				width: 208rpx;
				background: #354e44;
				margin-right: 0;
				color: #fff;
				line-height: 75rpx;
				height: 80rpx;

			}
		}

	}
</style>
